<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!--      <el-form-item label="上课班级班号" prop="courseclassNo">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.courseclassNo"-->
      <!--          placeholder="请输入上课班级班号"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="归属部门" prop="deptId" clearable>
        <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" style="width: 180px" placeholder="请选择归属部门" />
      </el-form-item>
      <el-form-item label="学期" prop="term">
        <el-select v-model="queryParams.term" placeholder="请选择学期" clearable>
          <el-option
            v-for="dict in dict.type.eval_term"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程名" prop="courseName">
        <el-input
          v-model="queryParams.courseName"
          placeholder="请输入课程名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="课程类型" prop="courseType">
        <el-select v-model="queryParams.courseType" placeholder="请选择课程类型" clearable>
          <el-option
            v-for="dict in dict.type.eval_course_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教师名" prop="realName">
        <el-input
          v-model="queryParams.realName"
          placeholder="请输入教师名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['pingjiao:courseclass:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['pingjiao:courseclass:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['pingjiao:courseclass:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['score:courseclass:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!--
    <el-table v-loading="loading" :data="courseclassList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="上课班级班号" align="center" prop="courseclassNo"/>
      <el-table-column label="课程名" align="center" prop="course.courseName"/>
      <el-table-column label="课程类型" align="center" prop="course.courseType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.eval_course_type" :value="scope.row.course.courseType"/>
        </template>
      </el-table-column>
      <el-table-column label="学期" align="center" prop="term"/>
      <el-table-column label="教师号" align="center" prop="teacherList[0].teacherNo"/>
      <el-table-column label="教师姓名" align="center" prop="teacherList[0].realName"/>
      <el-table-column label="分数" align="center" prop="courseclassScore"/>
      <el-table-column label="评教状态" align="center" prop="courseclassState"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['pingjiao:courseclass:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['pingjiao:courseclass:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    -->
    <el-table v-loading="loading" :data="courseclassList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="上课班级班号" align="center" prop="courseclassNo">
        <template slot-scope="scope">
          <router-link :to="'/pingjiao/courseclass/student/getlist/' + scope.row.courseclassId" class="link-type">
            <span>{{ scope.row.courseclassNo }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column label="课程名" align="center" prop="course.courseName">
				<template slot-scope="scope">
							  <router-link :to="{path:'/score/courseclassMetaclass/',query:{index:scope.row.courseclassId,courseId:scope.row.course.courseId}}" class="link-type">
								  <span>{{scope.row.course.courseName}}</span>
							  </router-link>
							  
				</template>
			</el-table-column>
      <el-table-column label="课程类型" align="center" prop="course.courseType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.eval_course_type" :value="scope.row.course.courseType"/>
        </template>
      </el-table-column>
      <el-table-column label="学期" align="center" prop="term"/>
      <el-table-column label="院系名称" align="center" prop="deptName"/>
      <el-table-column label="教师工号" align="center" prop="teacher.teacherNo"/>
      <el-table-column label="教师姓名" align="center" prop="teacher.realName"/>
      <!--      <el-table-column label="分数" align="center" prop="courseclassScore"/>-->
      <el-table-column label="行政班级名" align="center" prop="metaclass.metaclassName"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['pingjiao:courseclass:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['pingjiao:courseclass:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改上课班级管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" :before-close="cancel">

      <el-steps :active="active" finish-status="success" process-status="process" align-center >
        <el-step title="步骤 1" description="请选择课程"></el-step>
        <el-step title="步骤 2" description="请选择授课教师"></el-step>
        <el-step title="步骤 3" description="请填写基本信息"></el-step>
      </el-steps>

      <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane name="0" >
          <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="课程归属部门" >
              <treeselect v-model="deptIdC" :options="deptOptions" :show-count="true" :append-to-body="true" :zIndex="2500" placeholder="请选择归属部门" @select="handleTableNodeClickC"/>
            </el-form-item>
            <el-form-item label="课程名称" prop="courseId">
              <el-select v-model="form.courseId" placeholder="请选择课程" filterable :default-first-option="true">
                <el-option
                  v-for="course in courseList"
                  :key="course.courseId"
                  :label="course.courseName"
                  :value="course.courseId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="1">
          <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="教师归属部门" >
              <treeselect v-model="deptIdT" :options="deptOptions" :show-count="true" :append-to-body="true" :zIndex="2500" placeholder="请选择归属部门" @select="handleTableNodeClickT"/>
            </el-form-item>
            <el-form-item label="教师" prop="teacherList">
              <el-select v-model="form.teacherList" value-key="teacherId" placeholder="请选择任课教师" filterable multiple>
                <el-option
                  v-for="teacher in teacherList"
                  :key="teacher.teacherId"
                  :label="teacher.realName"
                  :value="teacher"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="2">
          <el-form ref="form" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="行政班级归属部门" >
              <treeselect v-model="deptIdM" :options="deptOptions" :show-count="true" :append-to-body="true" :zIndex="2500" placeholder="请选择归属部门" @select="handleTableNodeClickM"/>
            </el-form-item>
            <el-form-item label="行政班级" prop="metaclassList">
              <el-select v-model="form.metaclassList" value-key="meataclassId" placeholder="请选择任课班级" filterable multiple>
                <el-option
                  v-for="meataclass in metaclassList"
                  :key="meataclass.meataclassId"
                  :label="meataclass.metaclassName"
                  :value="meataclass"
                ></el-option>
              </el-select>
            </el-form-item>
            <!--
            <el-form-item label="课程ID" prop="courseId">
              <el-input v-model="form.courseId" placeholder="请输入课程ID" />
            </el-form-item>
            -->
            <!--
            <el-form-item label="教师" prop="teacherList">
              <el-select v-model="form.teacherList" value-key="teacherId" placeholder="请选择任课教师" filterable multiple>
                <el-option
                  v-for="teacher in teacherList"
                  :key="teacher.teacherId"
                  :label="teacher.realName"
                  :value="teacher"
                ></el-option>
              </el-select>
            </el-form-item>
            -->
            <el-form-item label="学期" prop="term" v-show="false">
              <el-input v-model="form.term" placeholder="请输入学期"/>
            </el-form-item>
            <el-form-item label="学期" prop="term">
              <el-select v-model="form.term" placeholder="请选择学期" clearable @change="handleSelectClick">
                <el-option
                  v-for="dict in dict.type.eval_term"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="上课班号" prop="courseclassNo" >
              <el-input v-model="form.courseclassNo" placeholder="请输入上课班级班号" :disabled="false"/>
            </el-form-item>
            <el-form-item label="分数" prop="courseclassScore" v-show="isShowScore">
              <el-input v-model="form.courseclassScore" placeholder="请输入分数"/>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" v-if="isStart">取消</el-button>
        <el-button @click="previous" v-else>上一步</el-button>

        <el-button type="primary" @click="submitForm" v-if="isEnd">提 交</el-button>
        <el-button @click="next" v-else>下一步</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  listCourseclass,
  getCourseclass,
  getCourseclass1,
  delCourseclass,
  addCourseclass,
  updateCourseclass
} from "@/api/pingjiao/courseclass";
import {listCourseSimple} from "@/api/pingjiao/course";
import {listTeacher, listTeacherSimple} from "@/api/pingjiao/teacher";
import { listMetaclass, listMetaclassSimple} from "@/api/pingjiao/metaclass";
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Courseclass",
  components: {Treeselect},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      //是否显示分数
      isShowScore: false,
      // 总条数
      total: 0,
      //
      list: [],
      // 部门树选项
      deptOptions: undefined,
      // 部门名称
      deptName: undefined,
      //教师相关选中部门id
      deptIdT: undefined,
      //课程相关选中部门id
      deptIdC: undefined,
      //班级相关选中部门id
      deptIdM: undefined,
      ccNoTno: undefined,
      ccNoTerm: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 行政班级管理表格数据
      metaclassList: [],
      // 课程管理表格数据
      courseList: [],
      // 教师管理表格数据
      teacherList: [],
      // 上课班级管理表格数据
      courseclassList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //步骤条
      active: 0,
      //是否为第一步
      isStart: true,
      //是否为最后一步
      isEnd: false,
      //标签页名称
      activeName: "0",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        courseclassNo: null,
        courseType: null,
        courseName: null,
        term: null,
        deptId: null,
        realName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getDeptTree();
  },
  dicts: ['eval_course_type','eval_term'],
  methods: {
    /** 查询上课班级管理列表 */
    getList() {
      this.loading = true;
      listCourseclass(this.queryParams).then(response => {
        console.log(response);
        this.courseclassList = response.rows;
        this.total = response.total;
        this.loading = false;
        //this.changgeCourseclassList();
      });
    },
    /*
    changgeCourseclassList() {
      //console.log("============")
      let list = [];
      for (let i = 0; i < this.courseclassList.length; i++) {
        //console.log(i)
        let cl = this.courseclassList[i];
        //console.log(cl);
        for (let j = 0; j < cl.teacherList.length; j++) {
          //console.log(j)
          cl.teacher = cl.teacherList[j]
          list.push(cl);
        }
      }
      //console.log(list);
      this.list = list;
    },
    */
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        console.log("deptOptions response.data",response.data[0].children);
        this.deptOptions = response.data[0].children;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.deptId = data.id;
    },
    // 插入或修改提升框节点单击事件
    handleTableNodeClickT(data) {
      this.deptIdT = data.id;
      //this.queryParams.deptId = data.id;
      this.getTeacherList(data.id);
    },
    // 插入或修改提升框节点单击事件
    handleTableNodeClickC(data) {
      this.deptIdC = data.id;
      //this.queryParams.deptId = data.id;
      this.getCourseList(data.id);
    },
    // 插入或修改提升框节点单击事件
    handleTableNodeClickM(data) {
      this.deptIdM = data.id;
      //this.queryParams.deptId = data.id;
      this.getMetaclassList(data.id);
    },
    handleSelectClick(data) {
      console.log(data);
      if (this.form.teacherList == null){
        return;
      }
      this.form.courseclassNo = this.form.term + this.form.teacherList[0].teacherNo
    },
    //课程过滤方法
    courseListFilter(){
      let tar = this.deptIdC;
      if(this.deptIdC != null && this.courseList != null){
        return this.courseList.filter(function (data) {
          return tar === data.deptId
        })
      }
    },
    //教师过滤方法
    teacherListFilter(){
      let tar = this.deptIdT;
      if(this.deptIdT != null && this.teacherList != null){
        return this.teacherList.filter(function (data) {
          return tar === data.deptId
        })
      }
    },
    //班级过滤方法
    metaclassListFilter(){
      let tar = this.deptIdM;
      if(this.deptIdM != null && this. metaclassList != null){
        return this. metaclassList.filter(function (data) {
          return tar === data.deptId
        })
      }
    },
    /** 查询课程列表 */
    getCourseList(departmentId) {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: departmentId,
      };
      this.loading = true;
      listCourseSimple(queryParams).then(response => {
        console.log(response);
        this.courseList = response.rows;
        this.loading = false;
      });
    },
    /** 查询教师管理列表 */
    getTeacherList(departmentId) {
      console.log(departmentId);
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: departmentId,
      };
      this.loading = true;
      listTeacherSimple(queryParams).then(response => {
        //console.log(response);
        this.teacherList = response.rows;
        this.loading = false;
      });
    },
    /** 查询行政班级管理列表 */
    getMetaclassList(departmentId) {
      let queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: departmentId,
      };
      this.loading = true;
      listMetaclassSimple(queryParams).then(response => {
        this.metaclassList = response.rows;
        this.loading = false;
      });
      //console.log(this.metaclassList);
    },
    //上一步
    previous() {
      this.active--;
      //console.log(this.active);
      if (this.active < 1) {
        this.isStart = true;
        this.activeName = this.active.toString();
        return ;
      }
      this.isEnd = false;
      this.activeName = this.active.toString();
    },
    //下一步
    next() {
      this.active++;
      //console.log(this.active);
      if (this.active > 1) {
        this.isEnd = true;
        this.activeName = this.active.toString();
        return ;
      }
      this.isStart = false;
      this.activeName = this.active.toString();
    },
    //
    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 取消按钮
    cancel() {
      this.isShowScore = false;
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        courseclassId: null,
        courseclassNo: null,
        courseId: null,
        term: this.dict.type.eval_term[0].value,
        courseclassScore: 0,
        courseclassState: "0",
        status: "0",
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
		metaclassId:null,
      };
      this.resetForm("form");
      this.active = 0;
      this.activeName = "0";
      this.metaclassList = []
      this.courseList = []
      this.teacherList = []
      this.isStart = true;
      this.isEnd = false;
      this.deptIdT = undefined;
      this.deptIdC = undefined;
      this.deptIdM = undefined;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.courseclassId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加上课班级管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.isShowScore = false;
      this.reset();
      const courseclassId = row.courseclassId || this.ids
      getCourseclass1(courseclassId).then(response => {
        this.form = response.data;
        this.courseList[0] = this.form.course
        this.teacherList = this.form.teacherList
        this.metaclassList = this.form.metaclassList
        this.deptIdT = this.form.course.deptId;
        this.deptIdC = this.form.course.deptId;
        this.deptIdM = this.form.course.deptId;
        this.open = true;
        this.title = "修改上课班级管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.courseclassId != null) {
            updateCourseclass(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.isShowScore = false;
              this.open = false;
              this.getList();
            });
          } else {
			  
			 this.form.meataclassId=this.form.metaclassList.map(item=>item.meataclassId);
			 console.log(this.form)
            addCourseclass(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const courseclassIds = row.courseclassId || this.ids;
      this.$modal.confirm('是否确认删除上课班级管理编号为"' + courseclassIds + '"的数据项？').then(function () {
        return delCourseclass(courseclassIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('score/courseclass/export', {
        ...this.queryParams
      }, `courseclass_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.el-step__head.is-success {
  color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}
.el-step__title.is-success {
  color: rgb(64, 158, 255);
}
.el-step__description.is-success {
  color: rgb(64, 158, 255);
}
</style>
